<script setup>
import DATAVVUE3 from '@kjgl77/datav-vue3'
import { onMounted, reactive } from 'vue';
import axios from 'axios';
import img1 from '../assets/img/1st.png'
import img2 from '../assets/img/2st.png'
import img3 from '../assets/img/3st.png'
import img4 from '../assets/img/4st.png'
import img5 from '../assets/img/5st.png'
import img6 from '../assets/img/6st.png'
import img7 from '../assets/img/7st.png'



let config = reactive({
  data: [
  ],
  img: [
    img1,
    img2,
    img3,
    img4,
    img5,
    img6,
    img7
  ],
  showValue: true
})
function getData(){
    axios.get('/stu-api/queryAllins')
    .then((response)=>{
      console.log(response)
      let x = response.data.data;
      for(let i=0;i<x.length;i++){
        config.data.push({
          name: x[i].interested_domain,
          value: x[i].occurrence_count
        })
      }
      console.log(config.data)
    })
    .catch((error)=>{
        console.log(error)
    })
}
onMounted(()=>{
    getData()
})
</script>

<template>
  <div class="bh">
    <p>学生兴趣领域分布</p>
    <dv-conical-column-chart :config="config" style="width:450px;height:200px;" />
  </div>
</template>

<style scoped>
.bh{
    display: flex;
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    text-align: center;
    flex-direction: column;

}
.box{
    margin-top: -26px ;
}
p{
    font-size: 18px;
    text-align: center;
    color:aliceblue;

}


</style>
